<template>
  <!--面包屑导航-->
  <Breadcrumb>
    <template #firstTitle>
      <span>数据统计</span>
    </template>
    <template #secondTitle>
      <span>数据报表</span>
    </template>
  </Breadcrumb>
  <!--卡片视图-->
  <el-card>
    <div id="main" style="width: 800px;height:400px;"></div>
  </el-card>
</template>
  
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue-demi'
import { getChart } from '@/api/reports.js'

const dataList = ref([])

onMounted(() => {
  createChart()
})

const createChart = async () => {
  const data = await getChart()
  dataList.value = data

  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  let option = {
    title: {
      text: '用户来源'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: dataList.value.legend,
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dataList.value.xAxis[0].data
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: dataList.value.series
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

</script>
  
<style lang="scss" scoped>
</style>